import { useRef, useEffect, useState, useLayoutEffect, Fragment } from 'react';
import { Button, Row, Col, Space } from 'antd';
import require from '../../utils/axios';
import { v7 } from 'uuid';
// import { KEY } from '../../utils/constant';
import { method } from 'lodash-es';
import Svideo from '@/conponents/sVode/index';
import { useNavigate } from 'react-router-dom';
const index = () => {
  const [cityInfo, setCityInfo] = useState({});
  const router = useNavigate();
  const [count, setCount] = useState(0);

  const [lives, setLives] = useState([]);
  const getGps = () => {
    navigator.geolocation.getCurrentPosition(async ({ coords: { latitude, longitude } }) => {
      const res = await fetch(
        `https://restapi.amap.com/v3/geocode/regeo?location=${longitude.toFixed(6)},${latitude.toFixed(6)},&key=${KEY}`,
        {
          method: 'GET',
        }
      );
      // fetch({
      //   url: "https://restapi.amap.com/v3/weather/weatherInfo",
      //   method: "GET",
      //   body: {
      //     key: KEY,
      //     city: data.regeocode.addressComponent.adcode,
      //   },
      // });
    });
  };

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <Svideo></Svideo>
      <Row>
        <Col>
          <Button onClick={getGps}>点击获取定位</Button>
        </Col>
        <Col>{cityInfo.regeocode?.formatted_address && <Button type="text">当前定位</Button>}</Col>
        <Col>
          <Button type="text">{cityInfo.regeocode?.formatted_address}</Button>
        </Col>
      </Row>
      <div>
        {Object.entries(lives).map((item) => {
          return (
            <Row gutter={20} key={v7()}>
              <Col span={8}>{item[0]}</Col>
              <Col span={16}>{item[1]}</Col>
            </Row>
          );
        })}
      </div>
      <Button
        onClick={() => {
          setCount(count + 1);
          router({
            pathname: '/upload',
          });
        }}
      ></Button>
    </div>
  );
};

export default index;
